<template>
  <el-dialog
    :visible.sync="visible"
    width="590px"
  >
    <div class="dialog__title">
      {{ licensePlateNumberFormat }}
      <!--      {{ vehicleInfo?.license_plate_number }}-->
    </div>

    <div class="dialog__body">
      <el-image :src="backgroundImage" style="width: 410px; height: 210px;" fit="cover" />
      <div class="info">
        <div class="dialog__info">
          <span class="key">车辆类型：</span>
          <span class="value">{{ vehicleInfo?.type?.name }}</span>
        </div>
        <div class="dialog__info" style="margin: 0 40px;">
          <span class="key">核载人数：</span>
          <span class="value">{{ vehicleInfo?.load_capacity }}人</span>
        </div>
        <div class="dialog__info">
          <span class="key">是否可用：</span>
          <span class="value">{{ vehicleInfo?.is_available === 1 ? '可用' : '不可用' }}</span>
        </div>
      </div>
    </div>

    <!--    <div class="info">-->
    <!--      <h3 class="title">车辆类型：</h3>-->
    <!--      <el-tag>{{ vehicleInfo?.type?.name }}</el-tag>-->
    <!--    </div>-->

    <!--    <div class="info">-->
    <!--      <h3 class="title">核载人数：</h3>-->
    <!--      <el-tag>{{ vehicleInfo?.load_capacity }}</el-tag>-->
    <!--    </div>-->

    <!--    <div class="info">-->
    <!--      <h3 class="title">是否可用：</h3>-->
    <!--      <el-tag>{{ vehicleInfo?.is_available === 1 ? '是' : '否' }}</el-tag>-->
    <!--    </div>-->

  </el-dialog>
</template>
<script>
export default {
  name: '',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    vehicleInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      backgroundImage: 'https://obs-user-test.obs.cn-east-3.myhuaweicloud.com:443/test_1708246853_STntlUN0Rj.png'
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    },
    licensePlateNumberFormat() {
      const licensePlate = this.vehicleInfo?.license_plate_number
      return licensePlate ? licensePlate?.slice(0, 2) + ' ' + licensePlate?.slice(2) : '-'
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog__title {
  color: #303133;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  padding-top: 10px;
}
.dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.info {
  display: flex;
  justify-content: center;
  align-items: center;

  .dialog__info {
    font-size: 16px;
    font-weight: 400;
    font-family: HONOR Sans CN, HONOR Sans CN;
  }

  .key {
    color: #303133;
  }

  .value {
    color: #606266;
  }
}
::v-deep(.el-dialog__body) {
  padding: 0 20px 20px 20px;
}

::v-deep(.el-dialog__close) {
  font-size: 24px;
}
</style>
